<template>
  <div class="not-found-bg">
    <div class="not-found-card">
      <div class="not-found-icon">
        <i class="fas fa-exclamation-triangle"></i>
      </div>
      <h1>404</h1>
      <p>抱歉，您访问的页面不存在</p>
      <el-button type="primary" class="back-btn" @click="goHome">返回首页</el-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()
function goHome() {
  router.push('/')
}
</script>
<style scoped>
.not-found-bg {
  min-height: 100vh;
  background: linear-gradient(135deg, #e6f0ff 0%, #f0f4f8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.not-found-card {
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 4px 32px rgba(13,27,42,0.10);
  padding: 48px 36px 36px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 350px;
  max-width: 90vw;
  transition: background 0.4s, box-shadow 0.4s;
}
.not-found-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #0d6efd, #0dcaf0);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 32px;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(13,110,253,0.10);
}
h1 {
  font-size: 48px;
  color: #0d6efd;
  margin-bottom: 8px;
  font-weight: 700;
}
p {
  font-size: 18px;
  color: #6c757d;
  margin-bottom: 24px;
}
.back-btn {
  background: linear-gradient(90deg, #0d6efd 0%, #0dcaf0 100%);
  border: none;
  font-size: 16px;
  font-weight: 600;
  border-radius: 24px;
  box-shadow: 0 2px 8px rgba(13,110,253,0.10);
  padding: 10px 32px;
  transition: background 0.3s, box-shadow 0.3s;
}
.back-btn:hover {
  background: linear-gradient(90deg, #0dcaf0 0%, #0d6efd 100%);
  box-shadow: 0 4px 16px rgba(13,110,253,0.18);
}
</style> 